<template>
  <div class="item_box">
    <div>
			<p class="title_1 mb20">系统操作变更</p>
      <el-table
        v-loading="loading"
        :data="list_0"
      >
        <el-table-column label="变更内容" align="center" prop="empName" :show-overflow-tooltip="true"/>
        <el-table-column label="分公司" align="center" prop="empDepartName" :show-overflow-tooltip="true"/>
        <el-table-column label="提交人" align="center" prop="positionname" :show-overflow-tooltip="true"/>
        <el-table-column label="提交时间" align="center" prop="officePhone" :show-overflow-tooltip="true"/>
        <el-table-column label="状态" align="center" prop="mobilPhone" :show-overflow-tooltip="true"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button link type="primary" @click="handle(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
		<div>
			<p class="title_1 mb20">启信宝自然变更</p>
      <el-table
        v-loading="loading"
        :data="list_1"
      >
        <el-table-column label="变更日期" align="center" prop="linkmanName" :show-overflow-tooltip="true"/>
        <el-table-column label="变更事项" align="center" prop="linkmanMobile" :show-overflow-tooltip="true"/>
        <el-table-column label="变更前" align="center" prop="linkmanMail" :show-overflow-tooltip="true"/>
        <el-table-column label="变更后" align="center" prop="linkmanDept" :show-overflow-tooltip="true"/>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, toRefs, watch } from "vue"

	const props = defineProps({
		activeName: {
			type: String,
		},
	})

  const list_0 = ref([])
  const list_1 = ref([])
  const loading = ref(false)
  const total = ref(0)

  const data = reactive({
    queryParams: {
      pageNum: 1,
      pageSize: 10,
    },
  })

  const { queryParams } = toRefs(data)

  const getList = () => {
    loading.value = true
    setTimeout(() => {
      list_0.value = [
        {
					empName: '变更后处室：航空客户处；变更前处室：石油化工客户处；',
					empDepartName: '总公司',
					positionname: '张三',
					officePhone: '2023-06-06 10:20:01',
					mobilPhone: '已通过',
          linkmanName: '2023-02-03 15:12:02',
					linkmanMobile: '负责人变更(法定代表人、负责人、首席代表和合伙人)',
					linkmanMail: '张三',
					linkmanDept: '李四',
        },
        {
					empName: '变更后处室：航空客户处；变更前处室：石油化工客户处；',
					empDepartName: '上海分公司',
					positionname: '张三',
					officePhone: '2023-06-06 09:20:01',
					mobilPhone: '已通过',
          linkmanName: '2023-02-03 16:12:02',
					linkmanMobile: '负责人变更(法定代表人、负责人、首席代表和合伙人)',
					linkmanMail: '张三',
					linkmanDept: '李四',
        }
      ]
      total.value = list_0.value.length
			list_1.value = list_0.value
      loading.value = false
    }, 200);
  }
  const handle = (val) => {

  }
  const exportList = () => {
    
  }
  getList()

	watch(() => props.activeName, (val) => {
		if (val == '2')
		getList()
	})
</script>
<style lang="scss" scoped>
</style>
